<template>
    <div class="view">
        <div class="container">
            <!-- 标题栏 -->
            <div class="title">
                <h2>新闻管理</h2>
                <!-- 添加按钮 -->
                <el-button size="mini" icon="el-icon-plus" @click="add">添加</el-button>
            </div>

            <el-table
                :data="values"
                style="width: 100%"
                fit
                >
                <el-table-column
                    prop="newsId"
                    label="ID"
                    align="center"
                    width="80"
                ></el-table-column>
                <el-table-column
                    prop="title"
                    label="标题"
                    align="center"
                ></el-table-column>
                <el-table-column
                    prop="content"
                    label="内容"
                    align="center">
                    <!-- 如果超过15个字，显示省略号 -->
                    <template slot-scope="scope">
                        <span>{{scope.row.content.length > 15 ? scope.row.content.substring(0, 15) + '...' : scope.row.content}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="status"
                    label="状态"
                    align="center">
                    <template slot-scope="scope">
                        <span v-if="scope.row.status === 'draft'">草稿</span>
                        <span v-else-if="scope.row.status === 'published'">已发布</span>
                        <span v-else-if="scope.row.status === 'archived'">已归档</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="tagName"
                    label="标签"
                    align="center">
                    <template slot-scope="scope">
                        <el-tag>{{scope.row.tagName}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="authorName"
                    label="作者"
                    align="center"   
                ></el-table-column>
                <el-table-column
                    prop="publicationDate"
                    label="发布时间"
                    align="center"
                    width="180"
                ></el-table-column>            
                <el-table-column
                label="操作"
                align="center"
                width="180"
                >
                <template slot-scope="scope">
                    <el-button type="" size="mini" icon="el-icon-edit" 
                    @click="edit(scope.row)">编辑</el-button>
                    <el-button type="warning" size="mini" icon="el-icon-delete" @click="delete_(scope.row)">删除</el-button>
                </template>
            </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination
                    layout="prev, pager, next"
                    :total="total"
                    @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
import { getapi,deleteapi } from '@/api/news'

export default {
    username: 'view',
    data() {
        return {
            value:{
                newsId:'',
                title:'',
                content:'',
                status: '', // 有'draft','published','archived'三种状态，分别是草稿，已发布，已归档
                tagId: '',
                authorId: '',
                publicationDate: '',
                
            },
            values:[],
            value_s:[],
            EditDialogVisible: false,
            current: 1,
            size: 10,
            total: 0
        }
    },
    methods: {
        get() {
            getapi(
                this.current,
                this.size
            ).then(res => {
                this.total = res.data.total;
                this.values = res.data.news
            })
        },
        handleCurrentChange(val) {
            this.current = val;
            this.get();
        },
        delete(id) {
            deleteapi(id).then(res => {
                this.get();
            })
        },
        edit(row) {
            this.$router.push({ path: '/news/editNews', query: { newsId: row.newsId } })
        },
        delete_(row) {
            this.$confirm('此操作将永久删除该标签, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.delete(row.newsId);
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        filterStatus(value, row) {
            return row.status === value;
        },
        add() {
            this.$router.push('/news/addNews')
        }


    },
    mounted() {
        this.handleCurrentChange(this.current);
    },
}
</script>

<style scoped>
.view {
    width: 100%;
    height: 100%;
    background-color: #fff;
    position: relative;
    padding-left: 80px;
    padding-right: 80px;
}


h2 {
    font-size: 25px;
    font-weight: 900;
    color: #397ddc;
    margin-bottom: 20px;
}

.container {
    margin-top: 40px;
}

.container .color {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-block;
}

.container span {
    color: #ccc;
    font-size: 12px;
}

/* title */
.title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* block */
.block {
    position: fixed;
    bottom: 20px;
}


</style>